<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.ul{background-color:green;
width:700px;
height:450px;
margin: 200px auto;

}
.li1{background-color:pink;
}
.li2{background-color:yellow;
}
.li3{background-color:pink;
}
.li4{background-color:yellow;
}
.li5{background-color:pink;
}
.li6{background-color:yellow;
}
.li7{background-color:pink;
}
.li8{background-color:yellow;
}
.li9{background-color:pink;
}
.li10{background-color:yellow;
}
.li11{background-color:blue;
}
.li12{background-color:blue;
}
li{float: left;
	list-style: none; /*去除小黑点  */
	margin: 30px;
	width: 58px;
	height: 100px;
animation:che 5s infinite linear; 
position:relative;
}
.div1{width: 58px;
	height: 100px;
background-color:skyblue;
position:absolute;
transform:rotate(60deg);
}
.div2{width: 58px;
	height: 100px;
background-color:blue;
position:absolute;
transform:rotate(-60deg);
}
@keyframes che{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
</style>
</head>
<body>
<ul class="ul">
<li class="li1"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li2"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li3"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li4"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li5"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li6"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li7"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li8"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li9"><div class="div1" ></div> <div class="div2" ></div>   </li>
<li class="li10"><div class="div1" ></div> <div class="div2" ></div>   </li>
</ul>
</body>
</html>